<template>
    <div class="count" @click="UserCount">{{count}}</div>
    <PlayGround v-if="$store.state.pk.status === 'playing'" />
    <MatchGround v-if="$store.state.pk.status === 'matching'" />
    <SelectGameVue v-if="$store.state.pk.status === 'select_game'" />
    <ResultBoard v-if="$store.state.pk.loser != 'none'" />
    <GoBang v-if="$store.state.pk.status === 'gobang'" />
    <div class="user-color"
        v-if="$store.state.pk.status === 'plaing' && parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">
        蓝方
    </div>
    <div class="user-color"
        v-if="$store.state.pk.status === 'plaing' && parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">
        红方
    </div>
</template>
<script>
import PlayGround from '../../components/PlayGround.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import { useStore } from 'vuex'
import MatchGround from '../../components/MatchGround.vue'
import SelectGameVue from '../../components/SelectGame.vue'
import ResultBoard from "../../components/ResultBoard.vue"
import GoBang from "../../components/GoBang.vue"
import IP from '../../store/api'
import $ from 'jquery'
export default {
    components: {
        PlayGround,
        MatchGround,
        SelectGameVue,
        ResultBoard,
        GoBang
    },
    setup() {
        const store = useStore();
        const count=ref([]);
        const socketUrl = `${IP.ip1}/websocket/${store.state.user.token}/`;
        store.commit("updateloser", "none");
        store.commit("updateIsRecord", false);
        let socket = null;

        onMounted(() => {
            store.commit("updateOpponent", {
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })

            socket = new WebSocket(socketUrl);

            socket.onopen = () => {
                store.commit("updateSocket", socket);
            }

            socket.onmessage = msg => {
                const data = JSON.parse(msg.data);
                if (data.event === "start-matching") {
                    store.commit("updateOpponent", {//匹配成功
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });
                    setTimeout(() => {
                        store.commit("updateStatus", "playing");
                    }, 200);
                    store.commit("updateGame", data.game);
                } else if (data.event === "move") {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    snake0.set_direction(data.a_direction);
                    snake1.set_direction(data.b_direction);
                } else if (data.event === "result") {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes;
                    if (data.loser === "all" || data.loser === "A") {
                        snake0.status = "die";
                    }
                    if (data.loser === "all" || data.loser === "B") {
                        snake1.status = "die";
                    }
                    store.commit("updateloser", data.loser);

                }
            }

            socket.onclose = () => {
                store.commit("updateStatus", "select_game");
            }
        });

        onUnmounted(() => {
            socket.close();
            store.commit("updateStatus", "matching");
        })

        const UserCount = () => {
            $.ajax({
                url: IP.UserCount_api,
                type: "GET",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp){
                    console.log(resp);
                    count.value=resp;
                },
               
            })
        }
        return {
            UserCount,
            count,
        }
    },
}
</script>

<style scoped>
div.user-color {
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: 600;
}

.count {
    color: aliceblue;
    text-align: right;
}
</style>